<template>
	<view v-if="list!= '' " class="wrap bg1">
		<view class="tabs p30">
			<view>
				<image class="vm" src="../../static/image/receiveok.png" mode=""></image>
				已领取: {{list.receiveDetile.receiveCount}}
			</view>
			<view>
				<image class="vm" src="../../static/image/receivenone.png" mode=""></image>
				未领取:{{list.receiveDetile.surplusCount}}
			</view>
		</view>
		<view class="list  ">
			<view v-for="(v,i) in list.receiveUser" class="p30 bgw">
				<image class="vm" :src="v.avatar_img" mode=""></image>
				{{v.mobile}}
				<view v-if="v.status == 0" class="fr">未使用</view>
				<view v-if="v.status == 1" class="fr fr1">已使用</view>
				<view v-if="v.status == 2" class="fr fr2">已过期</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		receiveRecord
	} from '@/api/api.js';
	export default {
		data() {
			return {
				id: 0,
				page: 0,
				size: 20,
				stops: 0,
				list: []
			};
		},
		onLoad(e) {
			this.id = e.id
			this.init();
		},
		onReachBottom() {
			if (this.stops == 0) {
				this.listadd();
			}
		},
		methods: {
			async init() {
				this.page = 0;
				let data = {
					couponId: this.id,
					page: this.page,
					size: this.size
				};
				let lists = await receiveRecord(data);
				if (lists.receiveUser.length != this.size) {
					this.stops = 1
				}
				this.list = lists
			},
			async listadd() {
				this.page = 0;
				let data = {
					couponId: this.id,
					page: this.page,
					size: this.size
				};
				let lists = await receiveRecord(data);
				if (lists.receiveUser.length != this.size) {
					this.stops = 1
				}
				this.list = [...this.list,...lists]
			}
		}
	};
</script>

<style lang="less" scoped>
	@import './index.less';
</style>
